<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-select
          v-if="createDicsObj.COMPANY_INDUSTRY"
          v-model="searchInfo.industry"
          clearable
          placeholder="行业信息"
          style="width:140px;"
        >
          <el-option
            v-for="item in createDicsObj.COMPANY_INDUSTRY.children"
            :key="item.dicName"
            :label="item.dicName"
            :value="item.dicCode"
          />
        </el-select>
        <el-select
          v-if="createDicsObj.COMPANY_LEVEL"
          v-model="searchInfo.level"
          clearable
          placeholder="客户级别"
          style="width:140px;"
        >
          <el-option
            v-for="item in createDicsObj.COMPANY_LEVEL.children"
            :key="item.dicName"
            :label="item.dicName"
            :value="item.dicCode"
          />
        </el-select>
        <el-input v-model="searchInfo.keyword" style="width:140px;" placeholder="企业名称" />
        <el-button type="primary" @click="searchInfoMations">搜 索</el-button>
      </div>
      <el-button
        v-if="accreditChildren.createCompany"
        class="right"
        type="primary"
        @click="jump('create')"
      >新建企业</el-button>
    </div>
    <el-table
      ref="table"
      stripe
      :height="this.$getTableHeight"
      highlight-current-row
      :data="tableData"
      border
      tooltip-effect="dark"
      style="width: 100%;"
    >
      <el-table-column show-overflow-tooltip prop="companyName" label="企业名称">
        <template slot-scope="scope">
          <span
            class="blue"
            @click.stop="changeActive(scope.row.id)"
          >{{ scope.row.id ?scope.row.companyName:'&nbsp;' }}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" show-overflow-tooltip label="所处行业">
        <template slot-scope="scope">{{ getDicNameInn({field:"行业信息",dicCode:scope.row.industry}) }}</template>
      </el-table-column>
      <el-table-column width="100" show-overflow-tooltip label="客户级别">
        <template slot-scope="scope">{{ getDicNameInn({field:"客户级别",dicCode:scope.row.level}) }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="orgName" label="所属部门" />
      <el-table-column width="100" show-overflow-tooltip prop="executorName" label="负责人" />
      <el-table-column width="100" show-overflow-tooltip prop="creationTime" label="创建时间" />
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.id">
            <span
              v-if="accreditChildren.deleteCompany"
              class="_delete"
              @click="deleteRow(scope.row)"
            >删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div :class="active ? 'closeRightBox trans':'openRightBox trans'" @click.stop>
      <detail
        v-if="active"
        :id="jumpId"
        :accredit-children="accreditChildren"
        :page-height="pageHeight"
        :update-right="updateRight"
        @clearJumpId="clearJumpId"
        @editor="openDialog"
      />
    </div>
    <div v-if="dialogVisible" @click.stop>
      <el-dialog
        :title="isCreate ? '新建公司' : '编辑公司'"
        center
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <createAdver :id="jumpId" @closeDialog="handleClose" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/commom/pagination'
import detail from '@/components/enterprise/detail'
import createAdver from '@/components/enterprise/createAdver'
import {
  _currentChange,
  _sizeChange,
  createDics,
  getDicName,
  reduceArr,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  changeTableHeight
} from '@/utils/util'
import mmUrl from '@/utils/utilUrl'
export default {
  components: {
    Pagination,
    detail,
    createAdver
  },
  data() {
    return {
      pageHeight: 0,
      dialogVisible: false,
      updateRight: false,
      jumpId: '',
      active: false,
      accreditArr: {},
      accreditChildren: {},
      multipleSelection: [], // 多选选中的数组
      loading: true,
      changeSelectOr: false,
      createDicsObj: {}, // JS创建的一个对象
      tableData: [], // table表格数据
      searchInfo: {
        // 搜索相关信息
        industry: '',
        keyword: '',
        level: ''
      },
      copySearchInfo: {
        // 复制搜索相关信息
        industry: '',
        keyword: '',
        level: ''
      },
      totalCount: 0, // 表格数据总数
      page: {
        // 关于当前分页数据
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      }
    }
  },
  mounted() {
    const pathStr = this.$route.path
    this.initGetTableData()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.updateRight = !this.updateRight
      this.searchInfoMations('no')
    },
    openDialog() {
      this.isCreate = false
      this.dialogVisible = true
    },
    clearJumpId() {
      this.active = false
      this.jumpId = null
    },
    changeActive(id) {
      this.active = true
      this.jumpId = id
    },
    jump(id) {
      this.dialogVisible = true
      this.jumpId = id
      id === 'create' ? (this.isCreate = true) : (this.isCreate = false)
    },
    getDicNameInn(res) {
      if (this.dics) {
        const result = Object.assign(
          { data: JSON.parse(JSON.stringify(this.dics)) },
          res
        )
        return getDicName(result)
      }
    },
    initGetTableData() {
      this.$post({
        url: mmUrl.enterprise.getInit,
        data: {
          page: this.page
        }
      })
        .then(res => {
          this.dics = res.dics
          this.createDicsObj = createDics(res.dics, 'dicCode')
          this.tableData = res.items.items
          this.totalCount = res.items.totalCount
          this.loading = false
          changeTableHeight(this)
        })
        .catch()
    },
    searchInfoMations(res) {
      // 点击搜索按钮触发的事件
      this.copySearchInfo = JSON.parse(JSON.stringify(this.searchInfo))
      const result = _searchInfo(res, this.page, this.copySearchInfo)
      this.changeTableDate(result)
    },
    deleteRow(row) {
      const that = this
      _deleteMethods(mmUrl.enterprise.delete, row, that).then(() => {
        that.searchInfoMations('no')
      })
    },
    handleSizeChange(val) {
      // 修改当前分页大小触发事件
      const result = _sizeChange(val, this.page, this.copySearchInfo) // 传递当前值 分页信息，以及需要copy的对象
      this.changeTableDate(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copySearchInfo)
      this.changeTableDate(result)
    },
    changeTableDate(res) {
      const that = this
      _changeTable(mmUrl.enterprise.search, res, that)
    }
  }
}
</script>

<style>
.right {
  float: right;
}
.left {
  float: left;
}
</style>
